// 危大工程

<template>
    <f7-page class="dangerous"
             ptr
             @ptr:refresh="refresh"
             infinite
             :infinite-distance="50"
             :infinite-preloader="true"
             @infinite="infinite">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>危大工程</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="plus"
                         v-has="'risk:riskList:add'"
                         @click.native="fnAdd()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>

        <van-notice-bar background="#fff"
                        color="#345">
            <f7-icon solt="left-icon"
                     color="#3385ff"
                     f7="layers_alt_fill"></f7-icon>
            <span>{{controlData.engineeInfo.engineeName}}</span>
        </van-notice-bar>

        <!-- 初始化页面 -->
        <template v-if="!controlData.dangerInfo.normalCount && !controlData.dangerInfo.largeCount && !controlData.dangerInfo.notDangerCount">
            <van-empty v-if="$framework.account.hasPermission('risk:riskList:add')">
                <f7-button fill
                           @click="fnAdd()">新增</f7-button>

                <f7-button fill
                           class="bsj"
                           @click="fnNotInvolved()">不涉及</f7-button>

                <div class="tips">
                    <span>1、若本工地涉及危大工程,则点击新增,上报危大工程信息；</span>
                    <span>2、若本工地不涉及危大工程,则点击“不涉及”，上报不涉及原因。</span>
                </div>
            </van-empty>
            <van-empty v-else
                       description="暂无数据"></van-empty>
        </template>

        <!-- 初始化页面 -->

        <!-- 新增后的页面 -->
        <template v-else>
            <div class="wdcg">
                <div>
                    <p>危大工程</p>
                    <span>
                        <span>{{controlData.dangerInfo.normalCount}}</span>项
                    </span>
                </div>
                <div>
                    <p>超危大工程</p>
                    <span>
                        <span>{{controlData.dangerInfo.largeCount}}</span>项
                    </span>
                </div>
            </div>

            <div class="selects">
                <span>
                    <v-picker-div placeholder="类型"
                                  :columns="controlData.dangerTypeEnums"
                                  :assignment="search"
                                  code="isDanger"
                                  @confirm="emitConfirm">
                    </v-picker-div>
                </span>
                <span>
                    <v-picker-div placeholder="审核状态"
                                  :columns="controlData.auditStatusEnums"
                                  :assignment="search"
                                  code="auditStatus"
                                  @confirm="emitConfirm">
                    </v-picker-div>
                </span>
                <span>
                    <v-picker-div placeholder="施工状态"
                                  :columns="controlData.riskStatusEnums"
                                  :assignment="search"
                                  code="riskStatus"
                                  @confirm="emitConfirm">
                    </v-picker-div>
                </span>
            </div>

            <f7-list media-list
                     class="enginee-list">
                <template v-for="(item, index) in query.data">
                    <template v-if="item.isDanger == 0">
                        <f7-list-item :key="index"
                                      @click.native="fnDetail(item)">
                            <div class="list-item-content">
                                <div class="content-header">不涉及原因：
                                    <span v-if="item.dangerTypeText"
                                          class="tag tag-fill">{{item.dangerTypeText}}</span>
                                </div>

                                <div class="grey">
                                    <section>
                                        <label>具体原因：</label>
                                        <span>{{item.notDangerReason}}</span>
                                    </section>
                                </div>

                                <p>
                                    <label>{{item.auditStatusText}}</label>
                                    <span>{{item.auditTime}}</span>
                                </p>
                            </div>
                        </f7-list-item>
                    </template>
                    <template v-else>
                        <f7-list-item :key="index"
                                      @click.native="fnDetail(item)">
                            <div class="list-item-content">
                                <div class="content-header">{{item.module}}
                                    <span v-if="item.isDanger == 1"
                                          class="tag tag-yellow-fill">{{item.dangerTypeText}}</span>
                                    <span v-else
                                          class="tag tag-red-fill">{{item.dangerTypeText}}</span>
                                </div>

                                <div class="grey">
                                    <section>
                                        <label>类别：</label>
                                        <span>{{item.riskTypeNameText}}</span>
                                    </section>
                                    <section>
                                        <label>施工状态：</label>
                                        <span>{{item.riskStatusText}}<f7-icon v-if="item.auditStatus == 2"
                                                     f7="square_pencil"
                                                     @click.native.stop="fnOpen(index, item)"></f7-icon></span>
                                    </section>
                                    <section>
                                        <label>计划开工日期：</label>
                                        <span>{{item.startDate}}</span>
                                    </section>
                                    <section>
                                        <label>计划完工日期：</label>
                                        <span>{{item.endDate}}</span>
                                    </section>
                                </div>

                                <p>
                                    <label>{{item.auditStatusText}}</label>
                                    <span>{{item.auditTime}}</span>
                                </p>
                            </div>
                        </f7-list-item>
                    </template>
                </template>
            </f7-list>
        </template>
        <!-- 新增后的页面 end -->

        <!-- 列表中编辑的弹出 -->
        <van-popup v-model="showSmall"
                   position="bottom"
                   @opened="fnShowSmallOpened">
            <van-field v-model="tempItem.riskStatusName"
                       class="sgzt"
                       readonly
                       label="施工状态"
                       placeholder="请选择">
                <div slot="input"
                     style="width: 100%">
                    <v-picker-div placeholder="请选择"
                                  :defCheck="tempItem.riskStatus"
                                  :columns="controlData.riskStatusEnums"
                                  :assignment="tempItem"
                                  code="riskStatus"
                                  name="riskStatusName">
                    </v-picker-div>
                </div>
            </van-field>

            <van-field readonly
                       clickable
                       :value="tempItem.startDate"
                       label="计划开工日期"
                       placeholder="请选择"
                       right-icon="tosend"
                       @click="showStartDate = true">
            </van-field>

            <van-field readonly
                       clickable
                       :value="tempItem.endDate"
                       label="计划完工日期"
                       placeholder="请选择"
                       right-icon="tosend"
                       @click="showEndDate = true">
            </van-field>

            <template v-if="calendar">
                <van-calendar v-model="showStartDate"
                              color="#3385ff"
                              :default-date="tempItem.startDate | defaultDate"
                              get-container="body"
                              @confirm="onConfirmStartDate">
                </van-calendar>
                <van-calendar v-model="showEndDate"
                              color="#3385ff"
                              :default-date="tempItem.endDate | defaultDate"
                              get-container="body"
                              @confirm="onConfirmEndDate">
                </van-calendar>
            </template>

            <div style="margin: 16px;">
                <van-button round
                            block
                            type="info"
                            @click.native="fnSmallSave()">提交</van-button>
            </div>
        </van-popup>
        <!-- 列表中编辑的弹出 -->
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"

export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: '/risk/riskList/getListModel',
            query: '/risk/riskList/query'
        }
    }
    onInit () {
        this.setSearch("engineeId", this.$params.engineeId, "list")
    }
    mixin () {
        return {
            data () {
                return {
                    showSmall: false,
                    showStartDate: false,
                    showEndDate: false,
                    calendar: false,

                    picker1: false,
                    picker2: false,
                    picker3: false,
                    search: {
                        isDanger: '',
                        auditStatus: '',
                        riskStatus: ''
                    },
                    controlData: {
                        // 项目信息
                        engineeInfo: {},
                        // dangerInfo
                        dangerInfo: {},
                        // 危大工程类别
                        dangerTypeEnums: [],
                        // 审核状态
                        auditStatusEnums: [],

                    },
                    tempIndex: 0,
                    tempItem: {}
                }
            },
            methods: {
                onConfirmStartDate (date) {
                    this.tempItem.startDate = this.$formatter.formatStartDateTime(date)
                    this.showStartDate = false
                },
                onConfirmEndDate (date) {
                    this.tempItem.endDate = this.$formatter.formatStartDateTime(date)
                    this.showEndDate = false
                },
                // 新增
                fnAdd () {
                    this.$f7router.navigate(`/business/construction/enginee/dangerous/add?engineeId=${this.controlData.engineeInfo.engineeId}&isDanger=1&action=processStart&appCode=riskList`)
                },
                // 不涉及
                fnNotInvolved () {
                    this.$f7router.navigate(`/business/construction/enginee/dangerous/add?engineeId=${this.controlData.engineeInfo.engineeId}&isDanger=0&action=processStart&appCode=riskList`)
                },
                // 详情
                fnDetail (item) {
                    this.getWorkflowArgs({ formId: item.riskListId }).then(rlt => {
                        let url = "";
                        rlt.appUrl = '/business/construction/enginee/dangerous/detail'

                        if (rlt.taskId) {
                            url = `${rlt.appUrl}?action=processEdit&taskId=${rlt.taskId}&assigneeId=${rlt.assigneeId}&appCode=${rlt.appCode}&version=${rlt.version}&_r=${new Date().getTime()}`;
                        } else if (rlt.historyTaskId) {
                            url = `${rlt.appUrl}?action=processView&historyTaskId=${rlt.historyTaskId}&appCode=${rlt.appCode}&version=${rlt.version}&_r=${new Date().getTime()}&assigneeId=${rlt.assigneeId}`;
                        } else {
                            this.$toast("无法获取应用的处理地址");
                        }

                        if (url) {
                            this.$f7router.navigate(url);
                        }
                    })
                    // this.$f7router.navigate('/business/construction/enginee/dangerous/detail')
                },
                // 条件搜索
                emitConfirm () {
                    this.$nextTick(() => {
                        this.searchQuery(this.search, "list")
                    })
                },
                fnSmallSave () {
                    let sallForm = {
                        riskListId: this.tempItem.riskListId,
                        riskStatusName: this.tempItem.riskStatusName,
                        riskStatus: this.tempItem.riskStatus,
                        startDate: this.tempItem.startDate,
                        endDate: this.tempItem.endDate
                    }
                    console.log(sallForm)
                    this.$util.request('/risk/riskList/updateRisk', sallForm, 'post').then(res => {
                        // Object.assign(this.query.data[this.tempIndex], this.sallForm)
                        if (res.status == 200 && res.data.success) {
                            let item = this.query.data[this.tempIndex]

                            item.riskStatusText = this.tempItem.riskStatusName
                            item.startDate = this.tempItem.startDate
                            item.endDate = this.tempItem.endDate

                            this.showSmall = false
                            this.$toast("修改成功")
                        } else {
                            this.$toast("修改失败")
                        }
                    })
                },
                // 打开保存
                fnOpen (index, item) {
                    this.tempIndex = index
                    this.tempItem = item
                    this.showSmall = true
                    console.log(this.tempItem)
                },
                // 修改状态和事件的弹窗动画结束
                fnShowSmallOpened () {
                    this.$nextTick(() => {
                        this.calendar = true
                    })
                }
            },
            filters: {
                defaultDate: function (val) {
                    if (val) {
                        return new Date(val)
                    } else {
                        return new Date()
                    }
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

.dangerous {
    .wdcg {
        margin-top: 10px;
        padding: 10px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(2, 1fr);
        background: #fff;

        > div {
            min-height: 75;
            display: flex;
            flex-direction: column;
            padding: 17px 28px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;

            &:nth-of-type(1) {
                background-image: url("../../../../../assets/img/wdgc.png");
            }

            &:nth-of-type(2) {
                background-image: url("../../../../../assets/img/cwdgc.png");
            }

            p {
                font-size: 14px;
                font-weight: 400;
                color: #61677a;
                line-height: 18px;
                margin: 0 0 2px 0;
            }

            > span {
                display: flex;
                align-items: baseline;
                font-size: 12px;
                font-weight: 500;
                color: #0f1826;
                line-height: 22px;

                > span {
                    font-size: 18px;
                }
            }
        }
    }

    .selects {
        display: flex;
        background-color: #fff;
        margin-top: 10px;

        > span {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;

            .f7-icons {
                font-size: 16px;
            }
        }
    }

    .enginee-list {
        margin: 10px 0;
        padding: 0 16px;

        @{deep} ul {
            background-color: #f0f2f5;

            .media-item {
                background-color: #fff;
                box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
                border-radius: 8px;
                border: 1px solid #edf0f6;

                & + .media-item {
                    margin-top: 10px;
                }
            }
        }

        .list-item-content {
            font-size: 14px;

            .content-header {
                display: flex;
                justify-content: space-between;

                > .tag {
                    flex-shrink: 0;
                    margin-left: 10px;
                }
            }

            > .grey {
                padding: 10px;
                margin-top: 10px;
                background-color: #fafafc;

                section {
                    padding: 10px 0;
                    display: flex;
                    color: #666;

                    > label {
                        width: 38%;
                        color: #888;
                        flex-shrink: 0;
                    }

                    .f7-icons {
                        color: #3385ff;
                        font-size: 20px;
                        margin-left: 4px;
                        margin-top: -5px;
                    }
                }
            }

            > p {
                color: #888;
                display: flex;
                justify-content: space-between;
                margin: 10px 0;
            }
        }
    }

    .van-empty {
        background-color: #fff;
        margin-top: 10px;

        @{deep}.van-empty__bottom {
            box-sizing: border-box;
            width: 100%;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .button {
                margin-top: 10px;
                width: 272px;
                border-radius: 36px;

                &.bsj {
                    background-color: #e2ebfc;
                    color: #3385ff;
                }
            }

            > .tips {
                width: 272px;
                box-sizing: border-box;
                margin-top: 16px;
                background: #f7fafe;
                border-radius: 3px;
                padding: 10px 15px;
                display: flex;
                flex-direction: column;

                span {
                    font-size: 12px;
                    font-weight: 400;
                    color: #b5bcca;
                    line-height: 17px;
                }
            }
        }
    }

    .sgzt {
        display: flex;
        justify-content: space-between;

        @{deep}.v-picker-div {
            padding: 0;
        }
    }
}
</style>
